<template>
	<Layout class="layout-container">
		<Content>
			<Spin fix v-if="loading"></Spin>
			<Form ref="form" :model="value" :rules="rules" label-position="left" :label-width="120">
				<Layout class="layout-container">
					<Content class="padding-all">
			            <FormItem :label="label.name" prop="name">
			                <Input type="text" v-model="value.name" :placeholder="placeholder.name" />
			            </FormItem>
			            <FormItem v-if="root" :label="label.storetype" prop="storetype">
			                <Select
			                	v-model="value.storetype"
			                	transfer
			                	:placeholder="placeholder.storetype">
			                	<template v-for="item in dict.storetype">
			                		<Option :value="item.value" :key="item.value">{{ item.label }}</Option>
			                	</template>
			                </Select>
			            </FormItem>
			            <FormItem :label="label.extent" prop="extent">
			                <Select
			                	v-model="value.extent"
			                	transfer
			                	:placeholder="placeholder.extent">
			                	<template v-for="item in dict.extent">
			                		<Option :value="item.value" :key="item.value">{{ item.label }}</Option>
			                	</template>
			                </Select>
			            </FormItem>
			            <FormItem :label="label.file" prop="file">
			            	<Upload
					            :before-upload="handleUpload"
					            action="./">
					            <Button icon="ios-cloud-upload-outline">{{$t('info.select', [label.file])}}</Button>
					        </Upload>
					        <div v-if="this.value.file !== null">{{label.name}}: {{ value.file.name }}</div>
			            </FormItem>
					</Content>
					<div class="padding-all">
		    			<span class="pull-right">
						<Button @click="reset">{{$t('info.reset')}}</Button>
						<Button 
							type="primary" 
							html-type="submit" 
							@click.prevent="submit">{{$t('info.submit')}}</Button>
						</span>
					</div>
				</Layout>
			</Form>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Form, FormItem, Button, Input, Select, Option, Upload } from 'view-design';
import { roles, dicts } from 'config/utils';
import { add } from './api';


export default {
	name: "SysFilemanagerAdd",
	data() {
		const label = {
			name: this.$t("sys.filemanager.name"),
			storetype: this.$t("sys.filemanager.storetype"),
			extent: this.$t("sys.filemanager.extent"),
			file: this.$t("sys.filemanager.file")
		};
		return {
			loading: true,
			label,
			placeholder: {
				name: this.$t("info.placeholder", [label.name]),
				storetype: this.$t('info.select', [label.storetype]),
				extent: this.$t('info.select', [label.extent]),
				file: this.$t('info.select', [label.file]),
			},
			value: {
				name: '',
				storetype: '',
				extent: '',
				file: null
			},
			dict: {
				storetype: [],
				extent: []
			},
			root: false,
			rules: {
				name: {
					label: label.name,
					max: 100,
					trigger: "blur"
				},
				storetype: {
					label: label.storetype,
					selected: true
				},
				extent: {
					label: label.extent,
					selected: true
				},
				file: {
					label: label.file,
					selected: true
				}
			}
		};
	},
	methods: {
		handleUpload(file) {
			this.value.file = file;
			return false;
		},
		submit() {
			this.$refs.form.validate((valid) => {
				if(valid) {
					this.loading = true;
					add(this.value, (res) => {
						if(res.success) {
							//回调
							this.$emit('callback');
							//关闭窗口
							this.$emit('close');
						}
						this.loading = false;
					});
				}
			});
			return false;
		},
        reset() {
            this.$refs.form.resetFields();
            this.value.file = null;
            if(this.dict.storetype.length > 0) {
				this.value.storetype = this.dict.storetype[0].value;
			} else {
				this.value.storetype = "local";
			}
			if(this.dict.extent.length > 0) {
				this.value.extent = this.dict.extent[0].value;
			} else {
				this.value.extent = "0";
			}
        }

	},
	mounted() {
		roles({root:"ROLE-ROOT"}, (isOk, data) => {
			var values = {
				fileRange:"FILE-RANGE"
			};
			if(isOk) {
				this.root = data.root;
			}
			if(this.root) {
				values.storageTypes = "STORAGE-MODE";
			}
			dicts({
				values: values,
				children: true
			}, (isOk, data) => {
				if(isOk) {
					if(this.root && data.storageTypes) {
						this.dict.storetype = data.storageTypes.children;
					}
					this.dict.extent = data.fileRange.children;
				}
				this.$nextTick(()=> {
					this.reset();
					this.loading = false;
				});
			});
		});
	},
	components: {
		Layout,
		Content,
		Spin,
		Form,
		FormItem,
		Button,
		Input,
		Select,
		Option,
		Upload
	}
}
</script>